<template>
	<view class="pupop">
		<u-popup :show="visible" :round="15" mode="bottom" @close="cancel" safe-area-inset-bottom>
			<view class="pupop-title">选择地区</view>
			<view class="popup-box">
				<picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item, index) in provinceList" :key="index">{{ item.name }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in cityList" :key="index">{{ item.name }}</view>
					</picker-view-column>
					<picker-view-column v-if="column == 3">
						<view class="item" v-for="(item, index) in areaList" :key="index">{{ item.name }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="footer fs_0">
				<view class="btn" @click="confirm">确定</view>
				<view class="line"></view>
				<view class="btn" @click="cancel">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getCityData } from "@/improve/services";
export default {
	data() {
		return {
			value: [],
			addressList: [],
			provinceList: [],
			cityList: [],
			areaList: [],
			indicatorStyle: `height: 50px;`,
			provinceIndex: 0,
			cityIndex: 0,
			areaIndex: 0,
			animationData: {}
		}
	},
	props: {
		column: {
			type: Number,
			default: 3
		},
		defaultValue: {
			default: () => ''
		},
		visible: {
			type: Boolean,
			default: () => false
		},
	},
	watch: {
		visible(val) {
			this.changeActive()
		},
		defaultValue() {
			this.init()
		}
	},
	created() {
		this.getCityData()
	},
	methods: {
		async getCityData() {
			const data = await getCityData()
			this.addressList = data || []
			this.init()
		},
		init() {
			var provinceList = []
			this.addressList.filter(item => {
				provinceList.push({
					code: item.code,
					name: item.name
				})
			})
			this.provinceList = [...provinceList]
			if (!this.defaultValue) {
				this.cityList = this.addressList[0].children
				this.areaList = this.addressList[0].children[0].children
			} else {
				var city = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外 " }
				if (Array.isArray(this.defaultValue) && this.defaultValue.length >= 2) {
					console.log(this.defaultValue)
					var province = this.defaultValue[0]
					var city = this.defaultValue[1]
					this.provinceIndex = 0
					this.cityIndex = 0
					this.areaIndex = 0
					this.provinceIndex = this.addressList.findIndex(obj => {
						return obj.name == province
					})
					this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0
					this.cityList = this.addressList[this.provinceIndex].children
					this.cityIndex = this.cityList.findIndex(obj => {
						return obj.name == city
					})
					this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0
					this.areaList = this.cityList[this.cityIndex].children
					if (this.defaultValue.length > 2) {
						this.areaIndex = this.areaList.findIndex(obj => {
							return obj.name == this.defaultValue[2]
						})
					}
					this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0
					this.$nextTick(() => {
						if (this.column == 3) {
							this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this.areaIndex]))
						} else if (this.column == 2) {
							this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]))
						}
					})
				} else if (/^\d{6}$/.test(this.defaultValue)) {
					var province = this.defaultValue.substr(0, 2)
					var city = this.defaultValue.substr(0, 4)
					this.provinceIndex = 0
					this.cityIndex = 0
					this.areaIndex = 0
					this.provinceIndex = this.addressList.findIndex(obj => {
						return obj.code == province
					})
					this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0
					this.cityList = this.addressList[this.provinceIndex].children
					this.cityIndex = this.cityList.findIndex(obj => {
						return obj.code == city
					})
					this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0
					this.areaList = this.cityList[this.cityIndex].children
					this.areaIndex = this.areaList.findIndex(obj => {
						return obj.code == this.defaultValue
					})
					this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0
					this.$nextTick(() => {
						if (this.column == 3) {
							this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this.areaIndex]))
						} else if (this.column == 2) {
							this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]))
						}
					})
				} else {
					uni.showToast({
						title: '地区编码格式不正确',
						icon: 'none'
					})
					console.log('地区编码格式不正确')
				}
			}
			this.changeActive()
		},
		confirm() {
			if (this.column == 3) {
				this.$emit('confirm', {
					code: this.addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code,
					name: this.addressList[this.provinceIndex].name + this.addressList[this.provinceIndex].children[this.cityIndex].name + this.addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name,
					provinceName: this.addressList[this.provinceIndex].name,
					cityName: this.addressList[this.provinceIndex].children[this.cityIndex].name,
					areaName: this.addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name
				})
			} else if (this.column == 2) {
				this.$emit('confirm', {
					code: this.addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code.substring(0, 4) + '00',
					name: this.addressList[this.provinceIndex].name + this.addressList[this.provinceIndex].children[this.cityIndex].name,
					provinceName: this.addressList[this.provinceIndex].name,
					cityName: this.addressList[this.provinceIndex].children[this.cityIndex].name
				})
			} else {
				uni.showToast({
					title: '目前column只能传2和3',
					icon: 'none'
				})
			}
		},
		cancel() {
			this.$emit('cancel')
		},
		// 动画
		changeActive() {
			var active = '-415px'
			if (this.visible) {
				active = 0
			}
			var animation = uni.createAnimation({
				duration: 400,
				timingFunction: 'linear'
			})
			animation.bottom(active).step()
			this.animationData = animation.export()
		},
		bindChange(e) {
			e.detail.value[0] = e.detail.value[0] || 0
			e.detail.value[1] = e.detail.value[1] || 0
			e.detail.value[2] = e.detail.value[2] || 0
			if (e.detail.value[0] != this.provinceIndex) {
				// console.log('监听第一列')
				this.provinceChange(e.detail.value[0])
			} else if (e.detail.value[1] != this.cityIndex) {
				// console.log('监听第二列')
				this.cityChange(e.detail.value[1])
			} else if (e.detail.value[2] != this.areaIndex) {
				// console.log('监听第三列')
				this.areaChange(e.detail.value[2])
			}
		},
		// 监听第一列变化
		provinceChange(e) {
			this.provinceIndex = e
			this.cityIndex = 0
			this.areaIndex = 0
			this.value = [...[e, 0, 0]]
			this.cityList = this.addressList[e].children
			this.areaList = this.addressList[e].children[0].children
		},
		// 监听第二列变化
		cityChange(e) {
			this.cityIndex = e
			this.areaIndex = 0
			// console.log(this.cityIndex, this.areaIndex)
			this.value = [...[this.provinceIndex, e, 0]]
			this.cityList = this.addressList[this.provinceIndex].children
			this.areaList = this.addressList[this.provinceIndex].children[e].children
		},
		// 监听第三列变化
		areaChange(e) {
			this.areaIndex = e
		},
	}
}
</script>

<style scoped lang="scss">
.pupop {
	.pupop-title {
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		height: 75px;
		line-height: 75px;
	}

	.footer {
		margin-top: 25px;
		border-top: 1px solid #f2f2f2;
	}

	.line {
		width: 100%;
		background-color: #f2f2f2;
		height: 6rpx;
	}

	.btn {
		height: 74px;
		text-align: center;
		line-height: 74px;
		color: #000000;
		font-size: 14px;
	}

	.picker-view {
		width: 750rpx;
		height: 225px;
		margin-top: 20rpx;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
		line-height: 50px;
	}
}
</style>
